<template>
  <section class="flex-1 pt-20 bg-neutral-10 pb-20">
    <!--$-->
    <div class="max-w-screen-xl mx-auto px-11 pt-20">
      <!--$-->
      <div class="w-full grid grid-cols-[auto_432px] gap-7">
        <div class="rounded-xl bg-white px-6 h-[max-content]">
          <div class="py-8 border-b border-neutral-30 last:border-0 first:pt-7">
            <p class="text-2xl font-medium">
              {{ orderData.orderType == "1" ? "素材" : "会员"
              }}<!-- -->：<!-- -->{{ orderData.itemBos.length
              }}<!-- -->件
            </p>
            <div class="space-y-7 pt-7 pb-8">
              <div
                class="grid grid-flow-col-dense grid-cols-3 gap-10"
                v-for="(item, index) in orderData.itemBos"
                :key="index"
              >
                <div class="flex col-span-3 items-center w-full">
                  <div
                    class="relative rounded-sm w-[142px] h-20 shrink-0 overflow-hidden"
                  >
                    <div class="flex items-center justify-center w-full h-full">
                      <a
                        ><img
                          class="w-full h-full transition hover:opacity-70 object-cover"
                          :src="item.thumbnailUrl"
                      /></a>
                    </div>
                  </div>
                  <div class="ml-4 flex-1 overflow-hidden space-y-4">
                    <p class="w-full truncate text-xl font-medium">
                      {{ item.itemName }}
                    </p>
                  </div>
                </div>

                <div class="w-20 flex flex-col items-end justify-center">
                  <div class="flex items-end">
                    <span class="text-xl font-medium mr-[2px]">{{ item.itemAmount }}</span
                    ><span class="text-sm pb-1">元</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="w-[432px]">
          <div class="sticky top-10 shadow-lg py-9 px-7 rounded-xl bg-white">
            <h3 class="font-medium text-xl">结算信息</h3>
            <div class="mt-10 space-y-6">
              <div class="flex justify-between font-medium">
                <span class="text-neutral-60">合计</span
                ><span class="text-lg"
                  >{{ orderData.orderAmount
                  }}<!-- -->元</span
                >
              </div>

              <hr
                aria-orientation="horizontal"
                class="dioa-divider border-0 border-b w-full h-[0px] border-current text-neutral-30"
              />
              <div class="flex justify-between items-center font-medium">
                <span class="text-neutral-60">实付</span>
                <div class="text-red space-x-1 flex items-center">
                  <span class="text-4xl">{{ orderData.orderAmount }}</span
                  ><span class="text-base pt-2">元</span>
                </div>
              </div>
            </div>
            <div class="dioa-form__form w-full flex mt-10">已确认订单信息，并认可</div>
            <div class="mt-5">
              <button
                type="button"
                class="dioa-button__root inline-flex appearance-none items-center justify-center select-none relative whitespace-nowrap align-middle transition outline-none cursor-pointer disabled:cursor-not-allowed h-14 px-10 text-lg font-medium lg:h-12 lg:px-8 text-white bg-red hover:bg-neutral-60 active:bg-black disabled:bg-neutral-40 data-loading:text-transparent data-loading:bg-neutral-40 rounded-full border-0 w-full"
                @click="msutbuy"
              >
                立即购买
              </button>
            </div>
          </div>
        </div>
      </div>
      <!--/$-->
    </div>
    <!--/$-->
    <!-- <Qrcode v-bind="QRStyle"></Qrcode> -->
    <canvas ref="qrCanvas"></canvas>
  </section>
  <!-- 授权框 -->
  <MyDialog @update:visible="updateDialog" :initVisible="dialogVisible" :width="400">
    <div class="closeBtn">
      <el-button @click="handleClose" circle><i class="iconfont">&#xe60e;</i></el-button>
    </div>
    <div class="title">请支付</div>
    <div class="imgtag"><img :src="qrCodeUrl" alt="QR Code" width="300" /></div>
  </MyDialog>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { userorderStore } from "@/store/orderStore";
import MyDialog from "@/components/MyDialog.vue";
import QRCode from "qrcode";
import { useRouter } from "vue-router";
const router = useRouter();

const orderStore = userorderStore();
const orderData = ref(JSON.parse(orderStore.$state.orderData));
const qr = ref("");
const msutbuy = () => {
  orderStore.postOrderFunction(orderData.value);
};
// 打开授权框
const dialogVisible = ref(false);
const openDialog = () => {
  // console.log(dialogVisible, "!23");
  dialogVisible.value = true;
};
const updateDialog = (value: boolean) => {
  // console.log(dialogVisible, "!23");
  dialogVisible.value = value;
};
const handleClose = () => {
  dialogVisible.value = false;
  // isOpen.value = false;
};

const qrCanvas = ref<HTMLCanvasElement | null>(null);
const qrCodeUrl = ref<string>("");
watch(
  () => orderStore.$state.qrCode,
  (newVal) => {
    console.log(newVal);
    qr.value = newVal;
    if (qrCanvas.value) {
      // QRCode.toCanvas(qrCanvas.value, qr.value, (error) => {
      //   if (error) console.error(error);
      // });
      QRCode.toDataURL(qr.value)
        .then((url: string) => {
          qrCodeUrl.value = url;
        })
        .catch((error: any) => {
          if (error) console.error(error);
        });
    }
    openDialog();
  }
);
watch(
  () => orderStore.$state.paymentcode,
  (newVal, oldVal) => {
    console.log(newVal, oldVal, "paymentcode");
    if (newVal != "W") {
      if (newVal != "P") {
        router.replace("/PayInform");
      }
    }
  }
);
</script>

<style scoped>
.closeBtn {
  padding: 10px 30px 0 0;
  text-align: right;
}
.title {
  font-size: 16px;
  padding: 15px 0;
  text-align: center;
  font-weight: bold;
  color: #000;
}
.imgtag {
  text-align: center;
}
.imgtag img {
  padding: 20px;
  display: block;
  margin: auto;
}
</style>
